<template>
  <view class="container">
    <view class="content" id="poster">
      <image :src="$Config.get('imageUrl')+'/index/share.png'" class="image"/>
      <view class="user">
        <view class="avatar">
          <image :src="userInfo.avatarUrl" />
        </view>
        <view class="info">
          <view class="name">{{ userInfo.nickName }}</view>
          <view class="desc">邀您加入</view>
        </view>
        <view class="qr-code">
          <uqrcode ref="uqrcode"  size="70" :value="address" canvas-id="qrcode"></uqrcode>
        </view>
      </view>
    </view>
    <view class="poster">
      <xinyu-canvas-drawer ref="poster" :width="590" :height="1058"></xinyu-canvas-drawer>
      <image :src="src" style="width: 590rpx;height: 1058rpx;"></image>
    </view>
    <view class="btn">
      <button class="button btn-primary" @click="saveImg">保存图片</button>
    </view>
<!--    <view class="bottom">-->
<!--      <view class="list">-->
<!--&lt;!&ndash;        <button open-type="share" class="item">&ndash;&gt;-->
<!--&lt;!&ndash;          <image :src="$Config.get('imageUrl')+'/index/i11.png'" />&ndash;&gt;-->
<!--&lt;!&ndash;          <view class="name">微信好友</view>&ndash;&gt;-->
<!--&lt;!&ndash;        </button>&ndash;&gt;-->

<!--&lt;!&ndash;        <view class="item">&ndash;&gt;-->
<!--&lt;!&ndash;          <image :src="$Config.get('imageUrl')+'/index/i12.png'" />&ndash;&gt;-->
<!--&lt;!&ndash;          <view class="name">朋友圈</view>&ndash;&gt;-->
<!--&lt;!&ndash;        </view>&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="item" @click="copy">&ndash;&gt;-->
<!--&lt;!&ndash;          <image :src="$Config.get('imageUrl')+'/index/i13.png'"/>&ndash;&gt;-->
<!--&lt;!&ndash;          <view class="name">复制链接</view>&ndash;&gt;-->
<!--&lt;!&ndash;        </view>&ndash;&gt;-->
<!--        <view class="item" @click="saveImg">-->
<!--          <image :src="$Config.get('imageUrl')+'/index/i14.png'" />-->
<!--          <view class="name">保存图片</view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
  </view>
</template>

<script>
import store from '@/store'
import storage from '@/utils/storage'
import { checkLogin ,getUserInfo} from '@/core/app'
import XinyuCanvasDrawer from "../plugin/xinyu-canvas-drawer/index.vue";
export default {
  components: {
    XinyuCanvasDrawer
  },
  data(){
    return {
      userInfo: null,
      address:"",
      src:''
    }
  },
  onLoad(){
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    this.userInfo = getUserInfo();
    this.getShareUrl()
  },
  onShow(){

  },
  onShareAppMessage() {
    return {
      title: '宝洞酒业',
      path: '/pages/index/index?userId='+store.getters.userId,
      imageUrl: this.$Config.get('imageUrl')+'/index/logo.jpg'
    }
  },
  onShareTimeline() {
    return {
      title: '宝洞酒业',
      path: '/pages/index/index?userId='+store.getters.userId,
      imageUrl: this.$Config.get('imageUrl')+'/index/logo.jpg'
    }
  },
  async mounted(){

  },
  methods: {
    getShareUrl(){
      let userSharedUrl = storage.get('userSharedUrl');
      if(userSharedUrl){
        this.address = userSharedUrl;
        this.draw()
      }else{
        this.$request.get('wx/user/getSharedUrl').then(res=>{
          // console.log(res)
          this.address = res.data.userSharedUrl;
          storage.set('userSharedUrl',res.data.userSharedUrl)
        }).catch(err=>{
          this.$toast(err.errmsg);
        }).finally(()=>{
          this.draw()
        })
      }


    },
    async draw(){
      let posterRef = this.$refs.poster;
      uni.showLoading()
      await posterRef.init();
      // console.log(this.userInfo.avatarUrl)
      this.src = await posterRef
          .setBackgroundColor("#F4F4F4") //指定渲染图片的背景色
          .addRect(0, 0, 590, 1058, "#FFFF") //绘制矩形
          // .addImage(require("@/static/share.png"), 0, 0, 590, 886) //绘制圆图片，如果不绘制圆图片最后一个参数可以不传或传false，当最后一个参数为true时圆形的直径为w，h参数将没有意义
          .addImage(this.$Config.get('imageUrl')+'/share.png', 0, 0, 590, 886) //绘制圆图片，如果不绘制圆图片最后一个参数可以不传或传false，当最后一个参数为true时圆形的直径为w，h参数将没有意义
          .addImage(this.address, 420, 902, 140, 140) //绘制圆图片，如果不绘制圆图片最后一个参数可以不传或传false，当最后一个参数为true时圆形的直径为w，h参数将没有意义
          // .addQRCode(this.address, 420, 902, 140, 140) //绘制二维码（不要太长否则会扫不出来）
          .addImage(this.userInfo.avatarUrl, 32, 918, 108, 108,true) //绘制云端图片时第一个参数直接传云端图片地址即可，不需要require。注意不要跨域
          .addText(this.userInfo.nickName, 160, 940, 32, "#242323", 453, false)
          .addText('邀您加入', 160, 990, 24, "#666464", 453, false)
          .draw();
      uni.hideLoading()
    },
    saveImg(){
      const app = this;
      let posterRef = app.$refs.poster;
      posterRef.saveImageToPhotosAlbum(app.src).then(()=>{
        app.$toast("保存成功");
      }).catch((e)=>{
        console.log(e)
        app.$toast("保存失败：" + JSON.stringify(e));
      });
    },
    copy(){
      uni.setClipboardData({
        data: this.address,
        success: function () {
          this.$toast({title:'复制成功',icon:'success',duration:1000})
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  padding:50rpx 80rpx;
  padding-bottom: 100rpx;
  background: #f1f1f1;
  min-height: 100vh;
  box-sizing: border-box;
  .content{
    display: none;
    overflow: hidden;
    border-radius: 10rpx;
    background: #FFF;
    .image{
      width: 100%;
      height: 800rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .user{
      display: flex;
      align-items: center;
      padding: 32rpx;
      box-sizing: border-box;
      .avatar{
        width: 100rpx;
        height: 100rpx;
        margin-right: 20rpx;
        image{
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .info{
        flex: 1;
        .name{
          font-size: 32rpx;
          color: #242323;
          font-weight: bold;
        }
        .desc{
          font-size: 24rpx;
          font-weight:500;
          color: #666464;
        }
      }
      .qr-code{
        width: 140rpx;
        height: 140rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .poster{

  }
  .bottom{
    height: 308rpx;
    background: #FFF;
    border-radius: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    .list{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40rpx 60rpx;
      .item{
        width: 110rpx;
        margin: 0;
        padding: 0;
        background: unset;
        line-height: unset;
        &::after{
          border:none;
          display: none;
        }
        image{
          width: 100%;
          height: 110rpx;
        }
        .name{
          font-size: 24rpx;
          font-weight: 400;
          color: #242323;
          margin-top: 6rpx;
          text-align: center;
        }
      }
    }
  }
  .btn{
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    button{
      width: 100%;
      height: 88rpx;
      background: #1777FF;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #FFFFFF;
      &:after{
        display: none;
      }
    }
  }
}
</style>